<template>
  <div class="main-container">
    <div class="paper-title">
      <el-button @click="handleClose">退出预览</el-button>
      <div>
        <div class="title">{{ paperInfo.paperName }}</div>
        <div>共 {{ paperInfo.questionCount }} 题，总分 {{ paperInfo.totalScore }} 分</div>
      </div>
      <div>
        <span>【随机组卷：<enum-view :custom-list="selectSwitch" :enum-value="paperInfo.randomCombine" />】</span>
        <span>【题目乱序：<enum-view :custom-list="selectSwitch" :enum-value="paperInfo.questionDerangement" />】</span>
        <span>【选项乱序：<enum-view :custom-list="selectSwitch" :enum-value="paperInfo.optionDerangement" />】</span>
      </div>
    </div>
    <el-row :gutter="25" class="paper-body">
      <el-col :span="4" class="paper-card">
        <card :titles="paperInfo.paperTitles" @click="handleClickOption" />
      </el-col>
      <el-col :span="20" class="paper-question">
        <div v-for="(item, index) in paperInfo.paperTitles" :key="index">
          <div class="title">{{ numToChinese(index + 1) }}、 {{ item.titleName }}（共{{ totalCount(item) }}题）</div>
          <div v-for="(itemSub, indexSub) in item.paperQuestions" :key="indexSub">
            <!--题目-->
            <question-content :question="itemSub" :index="indexSub + 1" />
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
  import { onMounted, reactive } from 'vue'
  import { questionApi } from '@/api/question.js'
  import { useRouter } from 'vue-router'
  import { useRoute } from 'vue-router/dist/vue-router'
  import EnumView from '@/components/Enum/View/index.vue'
  import { numToChinese } from '@/utils/base.js'
  import { selectSwitch } from '@/utils/constants.js'
  import QuestionContent from '@/components/Preview/Question/Content.vue'
  import Card from './Card.vue'
  const route = useRoute()
  const router = useRouter()

  // 点击答题卡选项
  const handleClickOption = (index) => {
    if (document.getElementById(index)) {
      document.getElementById(index).scrollIntoView()
    }
  }

  // 计算总题数
  const totalCount = (item) => {
    return item.singleChoiceCount + item.multipleChoiceCount + item.judgmentCount + item.gapFillingCount + item.shortAnswerCount
  }

  // 退出预览
  const handleClose = () => {
    router.go(-1)
  }

  // 初始化
  const paperInfo = reactive({})
  onMounted(async () => {
    // 试卷信息
    if (route.query.paperId) {
      const res = await questionApi.paperDetailView({ id: route.query.paperId })
      Object.assign(paperInfo, res)
      paperInfo.paperTitles.forEach((item) => {
        item.paperQuestions.forEach((itemSub) => {
          if (itemSub.questionType === 2) {
            // 多选题答案处理
            itemSub.questionAnswer2 = itemSub.questionAnswer.split('|')
          }
          if (itemSub.questionType === 4) {
            // 填空题答案处理
            itemSub.questionAnswer4 = itemSub.questionAnswer.split('|')
          }
        })
      })
    }
  })
</script>
<style lang="scss" scoped>
  .paper-title {
    display: flex;
    justify-content: space-between;
    text-align: center;
    margin-bottom: 20px;
    .title {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 10px;
    }
  }
  .paper-body {
    border-top: solid 1px #ddd;
    .paper-card {
      border-right: solid 1px #ddd;
      padding-top: 20px;
    }
    .paper-question {
      height: calc(100vh - 200px);
      padding-top: 20px;
      overflow: auto;
      .title {
        margin-bottom: 10px;
      }
    }
  }
</style>
